<script setup>
defineProps({
  stuList: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['del'])
const del = (e) => {
  emits('del', e)
}

const toPerson = () => {
  uni.navigateTo({
    url: '/subpackage/person/index'
  })
}

</script>

<template>
  <view class="list">
    <view v-for="item in stuList" :key="item.id" class="item" @click="toPerson">
      <view class="left">
        <up-avatar :text="item.name[0]" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
        <up-text :text="item.name" margin="0 20rpx" size="32rpx" style="font-weight: 500;"></up-text>
        <up-text :text="item.stuid" color="#393939" size="24rpx"></up-text>
      </view>
      <view class="right">
        <up-text color="#D3DADD" margin="0 30rpx" size="25rpx" text="|"></up-text>
        <up-icon name="close-circle-fill" @click="del(item.id)"></up-icon>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.list {
  width: 100%;

  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx 0;
    padding: 10rpx;
    height: 140rpx;
    background: #FFFFFF;
    box-shadow: 0 6rpx 12rpx 0 #dae4f080;
    border-radius: 24rpx;
    filter: blur(0);

    .left {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center
    }
  }
}
</style>